<template>
    <div class="module_main">
        <!-- <live-player video-url="http://192.168.1.11:10080/fvod/GTUGsiqig/video.m3u8"  show-custom-button="true" autoplay="true" aspect="16:9"  resolution="yh,fhd,hd,sd" resolutiondefault="fhd"></live-player> -->
        <div class="safelist-search-container mb-16">
            <a-row class="search-row">
                <a-col class="mr-8">
                    <a-input v-model:value="state.searchData.plateLicense" style="width: 250px;" placeholder="输入车牌" />
                </a-col>
                <a-col class="mr-8">
                    <a-select v-model:value="state.searchData.violationType" style="width: 200px;" placeholder="全部违章类型"
                        allowClear>
                        <a-select-option v-for="item in state.violationTypeList" :key="item.value" :value="item.value">
                            {{ item.label }}
                        </a-select-option>
                    </a-select>
                </a-col>
                <a-col class="mr-8">
                    <a-range-picker v-model:value="state.searchData.reportTimeRange" style="width: 300px;" 
                        placeholder="上报时间" />
                </a-col>
                <a-col>
                    <a-button type="primary" class="mr-8" @click="handleSearch">搜索</a-button>
                    <a-button type="primary" ghost @click="handleEmpty">重置</a-button>
                </a-col>
            </a-row>
            <a-row>
                <a-checkbox v-model:checked="state.batchExportChecked" class="mr-8">批量导出</a-checkbox>
                <a-button type="primary" ghost class="mr-8" @click="handleBatchExport">批量导出</a-button>
            </a-row>
        </div>
        <div class="safelist-table-container">
            <a-table :columns="tableProps.columns" :data-source="tableProps.dataSource"
                :pagination="tableProps.pagination" :scroll="{ y: 'calc(100vh - 320px)', x: '2000px' }"
                :row-selection="tableProps.rowSelection" :row-key="record => record.id">
                <template #bodyCell="{ column, text, record }">
                    <div v-if="column.key === 'action'" class="action_box">
                        <span v-if="record.reviewStatus === '待审核'" @click="viewReview(record)">查看审核</span>
                        <span v-else-if="record.reviewStatus === '审核通过'" @click="viewDetail(record)">查看</span>
                        <span v-else-if="record.reviewStatus === '审核驳回'" @click="viewReReview(record)">查看重新审核</span>
                    </div>
                    <div v-if="column.dataIndex === 'evidenceMaterial'">
                        {{ text === 1 ? '已上传' : '无' }}
                    </div>
                    <div v-if="column.dataIndex === 'reviewStatus'" :class="getReviewStatusClass(text)">
                        {{ getReviewStatusText(text) }}
                    </div>
                </template>
            </a-table>
        </div>
    </div>
    <violationDetail ref="violationDetailRef" @success="handleViolationDetailSuccess"></violationDetail>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { message } from "ant-design-vue"
import violationDetail from './components/violationDetail.vue'

const violationDetailRef = ref()
const tableProps = ref({
    columns: [
        {
            title: '',
            dataIndex: 'selection',
            width: 50,
            fixed: 'left'
        },
        {
            title: '违章类型',
            dataIndex: 'violationType',
            width: 120
        },
        {
            title: '车牌',
            dataIndex: 'plateLicense',
            width: 100
        },
        {
            title: '车辆编号',
            dataIndex: 'vehicleCode',
            width: 100
        },
        {
            title: '违章描述',
            dataIndex: 'violationDescription',
            width: 150
        },
        {
            title: '报警地点',
            dataIndex: 'alarmLocation',
            width: 200
        },
        {
            title: '发生时间',
            dataIndex: 'occurrenceTime',
            width: 160
        },
        {
            title: '证据材料',
            dataIndex: 'evidenceMaterial',
            width: 100
        },
        {
            title: '上报人',
            dataIndex: 'reporter',
            width: 100
        },
        {
            title: '上报人所属单位',
            dataIndex: 'reporterUnit',
            width: 150
        },
        {
            title: '上报时间',
            dataIndex: 'reportTime',
            width: 160
        },
        {
            title: '审核状态',
            dataIndex: 'reviewStatus',
            width: 100
        },
        {
            title: '审核人',
            dataIndex: 'reviewer',
            width: 100
        },
        {
            title: '审核意见',
            dataIndex: 'reviewComment',
            width: 150
        },
        {
            title: '审核时间',
            dataIndex: 'reviewTime',
            width: 160
        },
        {
            title: '操作',
            key: 'action',
            width: 200,
            fixed: 'right'
        }
    ],
    dataSource: [],
    rowSelection: {
        onChange: (selectedRowKeys, selectedRows) => {
            state.selectedRows = selectedRows;
            state.selectedRowKeys = selectedRowKeys;
        }
    },
    pagination: {
        current: 1,
        pageSize: 20,
        total: 0,
        showSizeChanger: true,
        showTotal: (total) => `共有${total}条数据`,
        onChange: (current, pageSize) => {
            tableProps.value.pagination.current = current;
            tableProps.value.pagination.pageSize = pageSize;
            init();
        }
    }
})
document.title = '无人车管理平台'
const state = reactive({
    searchData: {  //搜索条件
        plateLicense: '',
        violationType: null,
        reportTimeRange: null
    },
    batchExportChecked: false, //批量导出复选框
    selectedRows: [], //选中行
    selectedRowKeys: [], //选中行key
    
    violationTypeList: [ //违章类型列表
        { value: 'lane_violation', label: '不按规定车道行驶' },
        { value: 'illegal_parking', label: '违规停车' },
        { value: 'black_car', label: '疑似黑车' },
        { value: 'traffic_signal', label: '违反交通信号通行' }
    ]
})

// 查看审核
const viewReview = (record) => {
    violationDetailRef.value.showModal({
        title: '查看审核',
        ...record
    })
}

// 查看详情
const viewDetail = (record) => {
    violationDetailRef.value.showModal({
        title: '查看',
        ...record
    })
}

// 查看重新审核
const viewReReview = (record) => {
    violationDetailRef.value.showModal({
        title: '查看重新审核',
        ...record
    })
}

// 处理违章详情弹窗确认
const handleViolationDetailSuccess = (data) => {
    console.log('违章详情确认:', data)
    message.success('操作成功')
}

// 获取审核状态样式类
const getReviewStatusClass = (status) => {
    switch (status) {
        case '待审核':
            return 'status-pending'
        case '审核通过':
            return 'status-approved'
        case '审核驳回':
            return 'status-rejected'
        default:
            return 'status-pending'
    }
}

// 获取审核状态文本
const getReviewStatusText = (status) => {
    return status || '待审核'
}

// 批量导出
const handleBatchExport = () => {
    if (state.selectedRows.length === 0) {
        message.warning('请选择要导出的违章记录')
        return
    }
    console.log('批量导出:', state.selectedRows)
    message.info('批量导出功能待实现')
}

const init = () => {
    // 模拟违章数据
    const mockData = [
        {
            id: 1,
            violationType: '不按规定车道行驶',
            plateLicense: 'CS-0004试',
            vehicleCode: 'SVSD566',
            plateVin: 'LAWJHV3A8RS719823',
            violationDescription: '转弯跑直行到了',
            alarmLocation: '湖南省长沙市长沙县春华镇S206',
            occurrenceTime: '2025/07/16 10:33:21',
            evidenceMaterial: 1,
            reporter: '刘安',
            reporterUnit: '岳麓区第三交通支队',
            reportTime: '2025/07/15 11:33:21',
            reviewStatus: '待审核',
            reviewer: '周峰',
            reviewComment: '',
            reviewTime: '2025/07/16 11:33:21',
            operatorName: '中通',
            manufacturerName: '上海仙途智能科技有限公司',
            linkTel: '18166363546',
            linkman: '何德玛'
        },
        {
            id: 2,
            violationType: '违规停车',
            plateLicense: 'CS-0004试',
            vehicleCode: 'SVSD567',
            plateVin: 'LAWJHV3A8RS719824',
            violationDescription: '停放区域不允许停车',
            alarmLocation: '湖南省长沙市长沙县春华镇S206',
            occurrenceTime: '2025/07/16 10:33:21',
            evidenceMaterial: 0,
            reporter: '刘安',
            reporterUnit: '岳麓区第三交通支队',
            reportTime: '2025/07/15 11:33:21',
            reviewStatus: '待审核',
            reviewer: '周峰',
            reviewComment: '',
            reviewTime: '2025/07/16 11:33:21',
            operatorName: '中通',
            manufacturerName: '上海仙途智能科技有限公司',
            linkTel: '18166363546',
            linkman: '何德玛'
        },
        {
            id: 3,
            violationType: '疑似黑车',
            plateLicense: 'CS-0004试',
            vehicleCode: 'SVSD568',
            plateVin: 'LAWJHV3A8RS719825',
            violationDescription: '系统查不到',
            alarmLocation: '湖南省长沙市长沙县春华镇S206',
            occurrenceTime: '2025/07/16 10:33:21',
            evidenceMaterial: 1,
            reporter: '刘安',
            reporterUnit: '岳麓区第三交通支队',
            reportTime: '2025/07/15 11:33:21',
            reviewStatus: '审核通过',
            reviewer: '周峰',
            reviewComment: '',
            reviewTime: '2025/07/16 11:33:21',
            operatorName: '中通',
            manufacturerName: '上海仙途智能科技有限公司',
            linkTel: '18166363546',
            linkman: '何德玛'
        },
        {
            id: 4,
            violationType: '违规停车',
            plateLicense: 'CS-0004试',
            vehicleCode: 'SVSD569',
            plateVin: 'LAWJHV3A8RS719826',
            violationDescription: '停放区域不允许停车',
            alarmLocation: '湖南省长沙市长沙县春华镇S206',
            occurrenceTime: '2025/07/16 10:33:21',
            evidenceMaterial: 0,
            reporter: '何江',
            reporterUnit: '岳麓区第四交通支队',
            reportTime: '2025/07/15 11:33:21',
            reviewStatus: '审核通过',
            reviewer: '周峰',
            reviewComment: '',
            reviewTime: '2025/07/16 11:33:21',
            operatorName: '中通',
            manufacturerName: '上海仙途智能科技有限公司',
            linkTel: '18166363546',
            linkman: '何德玛'
        },
        {
            id: 5,
            violationType: '违反交通信号通行',
            plateLicense: 'CS-0004试',
            vehicleCode: 'SVSD570',
            plateVin: 'LAWJHV3A8RS719827',
            violationDescription: '闯红灯',
            alarmLocation: '湖南省长沙市长沙县春华镇S206',
            occurrenceTime: '2025/07/16 10:33:21',
            evidenceMaterial: 1,
            reporter: '何江',
            reporterUnit: '岳麓区第四交通支队',
            reportTime: '2025/07/15 11:33:21',
            reviewStatus: '审核驳回',
            reviewer: '周峰',
            reviewComment: '图片不清晰,无法辩证',
            reviewTime: '2025/07/16 11:33:21',
            operatorName: '中通',
            manufacturerName: '上海仙途智能科技有限公司',
            linkTel: '18166363546',
            linkman: '何德玛'
        }
    ]
    
    tableProps.value.dataSource = mockData
    tableProps.value.pagination.total = 6720
}

const handleSearch = () => {
    tableProps.value.pagination.current = 1;
    init()
}

const handleEmpty = () => {
    state.searchData = {
        plateLicense: '',
        violationType: null,
        reportTimeRange: null
    }
    init()
}


onMounted(() => {
    init()
})
</script>

<style lang="less" scoped>
.module_main {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.safelist-table-container {
    height: calc(100% - 48px);
    overflow: hidden;

    .action_box {
        display: flex;
        font-size: 14px;
        color: #00CCCC;

        span {
            cursor: pointer;
            margin-right: 8px;
        }

        .delete_btn {
            color: rgba(255, 47, 0, 1);
        }
    }

    .status-pending {
        width: 60px;
        height: 18px;
        background: #fff7e6;
        border-radius: 4px;
        color: #fa8c16;
        line-height: 18px;
        text-align: center;
        border: 1px solid #ffd591;
    }

    .status-approved {
        width: 60px;
        height: 18px;
        background: #f6ffed;
        border-radius: 4px;
        color: #52c41a;
        line-height: 18px;
        text-align: center;
        border: 1px solid #b7eb8f;
    }

    .status-rejected {
        width: 60px;
        height: 18px;
        background: #fff2f0;
        border-radius: 4px;
        color: #ff4d4f;
        line-height: 18px;
        text-align: center;
        border: 1px solid #ffccc7;
    }
}
</style>